import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Link } from 'react-router';
import {  message,Table,Dropdown,Menu,Button,Input ,Row,Col,Select,Popconfirm,Switch} from 'antd';
const Search = Input.Search;
const Option = Select.Option;
import NavBar from '../common/NavBar';
import ContentBody from '../common/ContentBody';
import api from '../api';
import moment from 'moment';
import {bind_change} from '../common/State';

import {PROTOCOL_TYPE} from '../constants/index';


export default class Agreement extends React.Component {
    constructor(props, context){
        super(props, context);
        let {type} = props.params||{};
        this.state={
           page:1,
           total:1,
           pageSize:10,
           type,
           list:[],
           loading:true,
        };
    }

    componentWillMount(){
      let {type} = this.state;
        this.doFetch({type});
    }
    componentWillReceiveProps(nextProps){
       let {type} = nextProps.params||{};
       this.setState({type})
         this.doFetch({type});
    }
    async doFetch({page=1,type}){

      let result = await api('/protocol/agreement/list',{type:PROTOCOL_TYPE[type],page});

      if(result.cd!=0){
        message.error(result.msg);
        this.setState({loading:false})
        return;
      }
      this.setState({
          page,
          total:result.total,
          list:result.data,
          loading:false
      })
    }


    //删除事件
    async deleteById(record){
       let result =  await api('/protocol/agreement/delete',{id:record.id});
       if(result.cd !=0 ){
         message.error(result.msg);
         return;
       }
        message.success('删除成功',1,() => {
          let {page,list,type} = this.state;
          if(list.length==1&&page>1){page--}
          this.doFetch({page,type})
        })
    }
    

    //分页
    toPage({current:page,pageSize,total}){
      this.setState({loading:true})
      let {type} = this.state;
      this.doFetch({page,type});
    }

    //状态事件
    async switchChange(record){
      let result = await api('/protocol/agreement/updateAgreementStatus',{id:record.id});
      if(result.cd!=0){
        message.error(result.msg);
        return;
      }
      this.setState({loading:true})
      let {type,page} = this.state;
      this.doFetch({page,type});
    }

   
    render() {
        var {list, page,total,pageSize,loading,type}=this.state;
        type = this.props.type||type
        return (
            <div >
                <NavBar navs={[{title:`${PROTOCOL_TYPE[PROTOCOL_TYPE[type]]}管理`}]} />
                <ContentBody className='container'>

                  <div className='marginB10'>
                      <Button 
                        type="primary" 
                        onClick={()=>{
                          this.context.router.push(`/protocol/${type}/edit`)
                        }}
                      >
                        创建新协议
                      </Button>
                  </div>  

                  <Table 
                    bordered
                    columns={this.getColumns(type)} 
                    simple 
                    dataSource={list}
                    pagination={{
                      current:page,
                      total,
                      pageSize,
                      showQuickJumper : true
                    }}
                    loading={loading}
                    onChange={this.toPage.bind(this)}
                    scroll={{ x: 1000 }}
                    rowKey={(record,index) => index}
                  />
                </ContentBody>
                  
            </div>
        );
    }

    getColumns(type){
      let columns = [
            {
              title: '编号',
              dataIndex: 'id',
              key: 'id',
            }, {
              title: '协议名称',
              dataIndex: 'title',
              key: 'title'
            }, {
              title: '协议链接地址',
              dataIndex: 'link_url',
              key: 'link_url'
            }, {
              title: '创建时间',
              dataIndex: 'created_at',
              key: 'created_at'
            },{
              title: '启用状态',
              dataIndex: 'status',
              key: 'status',
              render:(status,record,index)=>{
                return (
                   <Switch 
                      checked={status==1?true:false} 
                      checkedChildren="开" 
                      unCheckedChildren="关" 
                      onChange={this.switchChange.bind(this,record)}
                    />
                )
                // return status==1?'启用':'关闭'
              }
            },{
              title: '操作',
              key: 'action',
              fixed: 'right',
              width:100,
              render: (record) =>{
                  return (
                        <span>
                          <a 
                            href='javascript:void 0'
                            onClick={()=>{
                              this.context.router.push(`/protocol/${type}/edit?id=${record.id}`)
                            }}
                          >
                          编辑
                          </a>
                          <span className="ant-divider" />
                          <Popconfirm 
                            title="确定要删除?" 
                            onConfirm={this.deleteById.bind(this,record)} 
                            okText="确定" 
                            cancelText="取消"
                          >
                            <a href='javascript:void 0'>删除</a>
                          </Popconfirm>
                        </span>
                      )
              } ,
            }
        ];

        return columns
    }
}

Agreement.contextTypes= { router: React.PropTypes.object.isRequired};

